<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索实例</title>
    <style>
        div{
           padding-left: 800px;
           padding-top: 300px;
        }
        input{
            width: 150px;
            height: 30px;
            position: absolute;
        }
        ul{
            list-style: none;
            position: relative;
            left: -40px;
            top: 25px;
        }
        ul li {
            width: 155px;
            height: 40px;
            line-height: 40px;
            border: 1px solid #cccccc;
            border: none;
            background-color: #f2f2f2;
        }
        ul li:nth-child(odd){
            background-color: cornflowerblue;
        }
    </style>
</head>

<body>
    <div>
        <input type="text" placeholder="请输入关键字" name="keyword"/>
        <ul>
            
        </ul>
    </div>
   
</body>
</html>
<script>
    let obj = {
        data : new Set(),
        set keyword(value){
            this.data.add(value);
        },
        show(){
            let ul = document.querySelector("ul");
            ul.innerHTML = '';
            [...this.data].forEach((item,index,array)=>{
                ul.innerHTML += `<li>${item}</li>`;
            });
        }
    };

    let input = document.querySelector("[name='keyword']");
    input.addEventListener('blur',function(){
        obj.keyword = this.value;
        obj.show();
    });
</script>